//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin group-box-helpers() {
    /* ==========================================================================
       Group box

    //== Design Properties
    //## Helper classes to change the look and feel of the component
    ========================================================================== */
    // Color variations
    .groupbox-secondary,
    .groupbox-default {
        @include groupbox-variant($groupbox-default-color, $groupbox-default-bg);
    }

    .groupbox-primary {
        @include groupbox-variant($groupbox-primary-color, $groupbox-primary-bg);
    }

    // Success appears as green
    .groupbox-success {
        @include groupbox-variant($groupbox-success-color, $groupbox-success-bg);
    }

    // Warning appears as orange
    .groupbox-warning {
        @include groupbox-variant($groupbox-warning-color, $groupbox-warning-bg);
    }

    // Danger and error appear as red
    .groupbox-danger {
        @include groupbox-variant($groupbox-danger-color, $groupbox-danger-bg);
    }

    .groupbox-transparent {
        > .mx-groupbox-header {
            padding: $spacing-small * 1.5 0;
            color: $gray-darker;
            border-style: none;
            background: transparent;
            font-weight: $font-weight-semibold;
        }

        .mx-groupbox-body {
            padding: $spacing-small 0;
            border-radius: 0;
            border: 0;
            border-bottom: 1px solid $groupbox-default-bg;
            background-color: transparent;
        }

        .mx-groupbox-collapse-icon {
            color: $brand-primary;
        }
    }

    // Callout Look and Feel
    .groupbox-callout {
        > .mx-groupbox-header,
        > .mx-groupbox-body {
            border: 0;
            background-color: $callout-primary-bg;
        }

        > .mx-groupbox-header {
            color: $callout-primary-color;
        }

        .mx-groupbox-header + .mx-groupbox-body {
            padding-top: 0;
        }
    }

    .groupbox-success.groupbox-callout {
        > .mx-groupbox-header,
        > .mx-groupbox-body {
            background-color: $callout-success-bg;
        }

        > .mx-groupbox-header {
            color: $callout-success-color;
        }
    }

    .groupbox-warning.groupbox-callout {
        > .mx-groupbox-header,
        > .mx-groupbox-body {
            background-color: $callout-warning-bg;
        }

        > .mx-groupbox-header {
            color: $callout-warning-color;
        }
    }

    .groupbox-danger.groupbox-callout {
        > .mx-groupbox-header,
        > .mx-groupbox-body {
            background-color: $callout-danger-bg;
        }

        > .mx-groupbox-header {
            color: $callout-danger-color;
        }
    }

    //Bootstrap variations

    .groupbox-info {
        @include groupbox-variant($groupbox-info-color, $groupbox-info-bg);
    }

    .groupbox-inverse {
        @include groupbox-variant($groupbox-inverse-color, $groupbox-inverse-bg);
    }

    .groupbox-white {
        @include groupbox-variant($groupbox-white-color, $groupbox-white-bg);
    }

    .groupbox-info.groupbox-callout {
        > .mx-groupbox-header,
        > .mx-groupbox-body {
            background-color: $callout-info-bg;
        }

        > .mx-groupbox-header {
            color: $callout-info-color;
        }
    }
}
